<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单设计器</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/ui/form/module/formDesign/formdesign.css?33">
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
    <div class="layui-fluid">
        <form class="layui-form layui-card" lay-filter="editform" id="editform">
            <input type="text" name="e2ent_id" value="{$data.id}" hidden="">
            <!--div class="layui-card-header">表单设计</div-->
            <div class="layui-card-body">
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md2">
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">表单组件</ol>
                                <li>表单模板</ol>
                            </ul>
                            <div class="layui-tab-content" id="layui-form-attribute">
                                <div class="layui-tab-item layui-form layui-show">
                                    <div class="component">
                                        <div class="head">布局组件</div>
                                        <div class="component-group" id="sort_3">
                                            <ol data-tag="tab">
                                                <div class="icon"><i class="layui-icon layui-icon-tabs smallfont"></i>
                                                </div>
                                                <div class="name">TAB选项卡</div>
                                            </ol>
                                            <ol data-tag="grid">
                                                <div class="icon"><i class="layui-icon layui-icon-layouts"></i></div>
                                                <div class="name">栅格</div>
                                            </ol>
                                            <ol data-tag="space">
                                                <div class="icon"><i class="layui-icon layui-icon-more"></i></div>
                                                <div class="name">间距</div>
                                            </ol>
                                        </div>
                                    </div>
                                    <div class="component">
                                        <div class="head">表单组件</div>
                                        <div class="component-group" id="sort_1">
                                            <ol data-tag="input">
                                                <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                                <div class="name">单行输入</div>
                                            </ol>
                                            <ol data-tag="textarea">
                                                <div class="icon"><i class="layui-icon layui-icon-align-left"></i></div>
                                                <div class="name">多行输入</div>
                                            </ol>
                                            <ol data-tag="radio">
                                                <div class="icon"><i class="layui-icon layui-icon-radio"></i></div>
                                                <div class="name">单选框</div>
                                            </ol>
                                            <ol data-tag="checkbox">
                                                <div class="icon"><i class="layui-icon layui-icon-table"></i></div>
                                                <div class="name">多选框</div>
                                            </ol>
                                            <ol data-tag="select">
                                                <div class="icon"><i class="layui-icon layui-icon-print"></i></div>
                                                <div class="name">下拉框</div>
                                            </ol>
                                            <ol data-tag="date">
                                                <div class="icon"><i class="layui-icon layui-icon-time"></i></div>
                                                <div class="name">日期组件</div>
                                            </ol>
                                            <ol data-tag="colorpicker">
                                                <div class="icon"><i class="layui-icon layui-icon-theme"></i></div>
                                                <div class="name">颜色选择器</div>
                                            </ol>
                                            <ol data-tag="slider">
                                                <div class="icon"><i class="layui-icon layui-icon-slider"></i></div>
                                                <div class="name">滑块</div>
                                            </ol>
                                            <ol data-tag="rate">
                                                <div class="icon"><i class="layui-icon layui-icon-rate-solid"></i></div>
                                                <div class="name">评分</div>
                                            </ol>
                                            <ol data-tag="switch">
                                                <div class="icon"><i class="layui-icon layui-icon-switch">
                                                        <k></k>
                                                    </i></div>
                                                <div class="name">开关</div>
                                            </ol>
                                            <ol data-tag="cascader">
                                                <div class="icon"><i class="layui-icon layui-icon-cols"></i></div>
                                                <div class="name">级联选择器</div>
                                            </ol>
                                            <ol data-tag="editor">
                                                <div class="icon"><i class="layui-icon layui-icon-form"></i></div>
                                                <div class="name">富文本</div>
                                            </ol>
                                            <ol data-tag="upload">
                                                <div class="icon"><i class="layui-icon layui-icon-upload"></i></div>
                                                <div class="name">文件上传</div>
                                            </ol>
                                            <ol data-tag="tags">
                                                <div class="icon"><i class="layui-icon fa-instagram"></i></div>
                                                <div class="name">标签选择器</div>
                                            </ol>
                                            <ol data-tag="json">
                                                <div class="icon"><i class="layui-icon fa-bars"></i></div>
                                                <div class="name">JSON组件</div>
                                            </ol>
                                        </div>
                                    </div>

                                    <div class="component">
                                        <div class="head">辅助组件</div>
                                        <div class="component-group" id="sort_2">
                                            <ol data-tag="tips">
                                                <div class="icon"><i class="layui-icon layui-icon-tips"></i></div>
                                                <div class="name">提示</div>
                                            </ol>
                                            <ol data-tag="button">
                                                <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                                <div class="name">按钮</div>
                                            </ol>
                                            <ol data-tag="note">
                                                <div class="icon"><i class="layui-icon layui-icon-note"></i></div>
                                                <div class="name">便签</div>
                                            </ol>
                                            <ol data-tag="subtraction">
                                                <div class="icon"><i class="layui-icon layui-icon-subtraction"></i>
                                                </div>
                                                <div class="name">分割线</div>
                                            </ol>
                                        </div>
                                    </div>

                                </div>
                                <!-- // 加载远程表单模板 -->
                                <div id="layui-form-template" class="layui-tab-item">
                                    <div id="item-list" class="item-list">
                                        <div class="item-body formTpl" data-id="1">
                                            <div class="item-img">
                                                <img src="/static/images/tpl1.png" lay-image-hover=""
                                                    data-size="635,500" alt="">
                                            </div>
                                            <div class="item-desc">
                                                <span class="item-title">#1 示例表单</span>
                                                <button type="button" class="right-button button--text">
                                                    <span> 加载此模板</span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="layui-card-header">
                            <div class="fr">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-export"><i
                                        class="layui-icon layui-icon-export"></i>导出</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-import"><i
                                        class="layui-icon layui-icon-layer"></i>导入</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-component"> <i
                                        class="layui-icon layui-icon-component"></i> 预览</button>
                                <button type="button"
                                    class="layui-btn layui-btn-sm layui-btn-danger layui-form-clear"><i
                                        class="layui-icon layui-icon-delete"></i>清空</button>
                            </div>
                        </div>
                        <!-- // 表单设计区域 -->
                        <div id="formBuilder" style="width: 100%"></div>
                        <!-- // 表单隐藏域 -->
                        <textarea id="formdesign" name="formdesign" hidden></textarea>
                    </div>
                    <div class="layui-col-md2" style="padding-top: 0;">
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this" id="set_field">组件属性</li>
                                <li id="set_val">表单属性</li>
                            </ul>

                            <div class="layui-tab-content" id="layui-form-attribute">
                                <div class="layui-tab-item layui-form layui-show" id="Propertie" lay-filter="Propertie">
                                </div>

                                <div class="layui-tab-item" id="form_data">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">表单名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="form_names" name="form_names" class="layui-input" value=""
                                                placeholder="请输入表单名称">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">表单ID</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="form_ids" name="form_ids" class="layui-input" value=""
                                                placeholder="请输入表单ID">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">表单备注</label>
                                        <div class="layui-input-inline">
                                            <textarea name="remark" placeholder="请输入备注" class="layui-input"></textarea>
                                        </div>
                                    </div>
                                    <!--div class="layui-form-item">
                                        <label class="layui-form-label">表单类型</label>
                                        <div class="layui-input-inline">

                                            <input type="radio" value="1" name="form_type" title="内置">
                                            <input type="radio" value="2" name="form_type" title="模版" checked="">

                                        </div>
                                    </div-->

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="id" >
        </form>
            <div class="layui-footer layui-form-footer">
                
                <!--button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">取消</button-->
                <button class="layui-btn" id="submitBtn" type="button" lay-submit>提交</button>
            </div>
        
    </div>

    <div class="layui-htmlview" style="display: none;">
        <textarea id="json-code"></textarea>
        <div class="layui-htmlbtn">
            <button id="copy-code" class="layui-btn layui-hide">复制代码</button>
            <button id="import-code" class="layui-btn layui-hide">导入数据</button>
        </div>
    </div>
    <script src="../config.js"></script>
    <script src="/static/ui/form/layui.js"></script>
    <!-- // 全局加载第三方JS -->
    <script src="/static/ui/form/cascadata.js?v=v1.1.20"></script>
    <script src="/static/ui/form/tinymce/tinymce.min.js?v=v"></script>
    <!-- // 加载font-awesome图标 -->
    <link href="/static/ui/form/css/font-awesome.css?v=v1.1.20" rel="stylesheet" type="text/css" />
    <script src="/static/ui/form/Sortable/Sortable.js?v=v1.1.20"></script>
    <script>
        //window.open = null;
        layui.config({
            version: true,
            base: '/static/ui/form/module/'
        }).extend({
            cascader: 'cascader/cascader',
            tags: 'tags/tags',
            iconSelected : 'iconSelected/js/index',
            formDesign: 'formDesign/formDesign'
        }).use(['form', 'jquery', 'flow', 'formDesign', 'tags','element','iconSelected'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let tags = layui.tags;
            let formDesign = layui.formDesign;
            let element = layui.element;
            let req = _req();

            let insForm;
            if(req.id) {
                _get(layui, 'form/editBefore?id=' + req.id, res => {
                    console.log(res)
                    //let fromdata = JSON.parse(res.formdesign)
                    let fromdata = res.formdesign
                    insForm = formDesign.render({
                        elem: '#formBuilder',
                        eval: '#formdesign',
                        data : fromdata,
                        count : fromdata.length
                    });
                    $('#form_names').val(res.form_name)
                    $('#form_ids').val(res.form_id)
                    //form.val('editform', res)

                })
            }else{
                insForm = formDesign.render({
                    elem: '#formBuilder', 
                    eval: '#formdesign'
                });
            }
            function setShow(){
                $('#Propertie').removeClass('layui-show')
                $('#form_data').addClass('layui-show')
                $('#set_field').removeClass('layui-this')
                $('#set_val').addClass('layui-this')
            }
            document.body.ondrop = function (event) { 
                event.preventDefault(); 
                event.stopPropagation(); 
            }
            //form.on('submit(submitIframe)', function (data) {
            $("#submitBtn").click(() =>{
                //console.log($("#editform").serializeArray())
                //return;
                let form_name = $('#form_names').val()
                let form_id = $('#form_ids').val()
                if(!form_name) {
                    layer.msg('请填写表单名', {icon : 2, time : 1000})
                    setShow()
                    $('#form_names').focus()
                    return false;
                }
                if(!form_id) {
                    layer.msg('请填写表单id', {icon : 2, time : 1000})
                    setShow()
                    $('#form_ids').focus()
                    return false;
                }
                let postData = {
                    formdesign : JSON.stringify(insForm.config.data),
                    form_name : form_name,
                    form_id : form_id,
                }
                let postUrl = 'form/add';;
                if(req.id) {
                    postUrl = 'form/edit';
                    postData.id = req.id;
                }
                console.log(postData)
                //return;
                _post(layui, postUrl, postData, res => {
                    parent.layui.table.reload("form-table");
				    parent.layer.close(parent.layer.getFrameIndex(window.name));
                })
                return false;
            })
            //console.log('success');

            // layui.flow.load({
            // 	elem: '#item-list'
            // 	,done: function(page, next){
            // 		var list = [];
            // 		$.get('//api.swiftadmin.net/form/?page='+page,function(res) {
            // 			layui.each(res.data, function(index, item){
            // 				list.push(item);
            // 			}); 
            // 			next(list.join(''), page < res.total );  
            // 		})
            // 	}
            // });
        })
    </script>